<script setup lang="ts">
import { getTotal, getSaleGoodsTotalApi, getSaleMoneyTotalApi } from '@/api/home'
import { dataPageApi } from '@/api/goods'
import type {chartDataInt} from '@/hooks/useChart/charTypes.ts'

// 统计数据
const salesTotal = ref(0)
const ordersTotal = ref(0)
const memberTotal = ref(0)
const avgOrderNum = ref(0)

// 获取统计数据
const getTotalFun = () => {
  getTotal().then((res) => {
    const data = res.data
    salesTotal.value = data.salesTotal
    ordersTotal.value = data.ordersTotal
    memberTotal.value = data.memberTotal
    avgOrderNum.value = data.avgOrderNum
  })
}

getTotalFun()

// 库存预警数据
const inventoryWarningData = ref([
  // { name: '镜架A款', value: 5 },
  // { name: '镜片B型', value: 3 },
  // { name: '太阳镜C款', value: 2 },
  // { name: '护理液D型', value: 8 }
])
// 获取商品列表
const getGoodsPage = () => {
  dataPageApi({
    pageNum: 1,
    pageSize: 12,
    orderType: 'asc',
    orderField: 'good_num'
  }).then((res: any) => {
    console.log(res, 'resGoodsPage')
    inventoryWarningData.value = res.data.records
  })
}

getGoodsPage()



interface salesChartDataInt extends chartDataInt {
  totalSaleAmount:string
}
// 商品类别销售占比数据
const categorySalesData = ref<salesChartDataInt[]>([])
const getSaleGoodsTotalFun = () => {
  getSaleGoodsTotalApi().then((res: any) => {
    if (res.data && res.data.length > 0) {
      categorySalesData.value = res.data
    }
  })
}
getSaleGoodsTotalFun()

// 商品销售TOP5数据
// const top5Products = ref([
//   { name: '雷朋太阳镜', sales: 1280, rank: 1 },
//   { name: '依视路镜片', sales: 980, rank: 2 },
//   { name: '暴龙镜架', sales: 860, rank: 3 },
//   { name: '海昌隐形眼镜', sales: 720, rank: 4 },
//   { name: '博士伦护理液', sales: 680, rank: 5 }
// ])
// 销售趋势数据
const salesTrendData = ref([])
const xAxisData = ref([])
const getSaleMoneyTotalFun = () => {
  getSaleMoneyTotalApi().then((res: any) => {
    salesTrendData.value = res.data.chartData
    xAxisData.value = res.data.xaxisData

  })
}

getSaleMoneyTotalFun()
</script>

<template>
  <div class="dashboard-container flex-center column">
    <!-- 统计概览 -->
    <div class="statistics-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="statistic-card">
            <div class="card-icon sales-icon">
              <SvgIcon icon-class="money" />
            </div>
            <div class="card-content">
              <div class="card-title">总销售额</div>
              <div class="card-value">
                <DpCountUp :count="salesTotal" :duration="2" :decimalPlaces="2" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <div class="card-icon order-icon">
              <SvgIcon icon-class="shopping" />
            </div>
            <div class="card-content">
              <div class="card-title">订单数量</div>
              <div class="card-value">
                <DpCountUp :count="ordersTotal" :duration="2" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <div class="card-icon member-icon">
              <SvgIcon icon-class="member" />
            </div>
            <div class="card-content">
              <div class="card-title">会员数量</div>
              <div class="card-value">
                <DpCountUp :count="memberTotal" :duration="2" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <div class="card-icon price-icon">
              <SvgIcon icon-class="chart" />
            </div>
            <div class="card-content">
              <div class="card-title">平均客单价</div>
              <div class="card-value">
                <DpCountUp :count="avgOrderNum" :duration="2" :decimalPlaces="2" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container flex-center-between">
      <!-- 左侧：销售趋势分析和商品类别销售占比（上下布局） -->
      <div class="charts-container-left flex-start-between column">
        <div class="chart-card flex-start-start column">
          <div class="chart-header">
            <h3>销售趋势分析</h3>
          </div>
          <div class="chart-body">
            <DpChartLineBase :chart-data="salesTrendData" :x-axis-data="xAxisData" chart-type="line" />
          </div>
        </div>

        <div class="chart-card flex-start-start column">
          <div class="chart-header flex-center-between">
            <h3 style="flex: 14;">商品类别销售情况</h3>
            <h3 style="flex: 10;">商品销售排行榜</h3>
          </div>
          <div class="chart-body">
            <el-row :gutter="20" style="height: 100%">
              <el-col :span="14" style="height: 100%">
                <DpChartPieBase
                  v-if="categorySalesData.length > 0"
                  :chart-data="categorySalesData"
                  width="100%"
                  :grid="{
                    top: '20px',
                    right: '80px',
                    bottom: '20px',
                    left: '15px'
                  }"
                />
              </el-col>
              <el-col :span="10" style="height: 100%">
                <div class="top-products scroll">
                  <div class="top-products-list ">
                    <div v-for="(product, index) in categorySalesData" :key="product.name" class="product-item" :class="{ 'first-rank': index === 0 }">
                      <div class="product-rank">
                        <span class="rank-badge" :class="{'top' : index <= 2}">{{ index+1 }}</span>
                      </div>
                      <div class="product-name">{{ product.name }}</div>
                      <div class="product-money">{{ product.totalSaleAmount }}元</div>
                      <div class="product-sales">({{ product.value }} 件)</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <!-- 右侧：库存预警 -->
      <div class="inventory-warning">
        <el-card style="height: 100%">
          <template #header>
            <div class="card-header">
              <span>库存信息</span>
            </div>
          </template>
          <el-table :data="inventoryWarningData" style="width: 100%" height="100%">
            <el-table-column prop="goodName" label="商品名称" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.goodName }}
                <el-tag>{{ scope.row.goodModel }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="goodNum" label="库存数量" width="80" align="center" />
            <el-table-column label="状态" width="100" header-align="center">
              <template #default="scope">
                <el-tag :type="scope.row.goodNum == 0 ? 'danger' : scope.row.goodNum < 5 ? 'warning' : 'success'">
                  {{ scope.row.goodNum == 0 ? '库存不足' : scope.row.goodNum < 5 ? '即将售罄' : '库存充足' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
  .statistics-overview {
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;

    .statistic-card {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(113, 93, 93, 0.1);

      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        font-size: 24px;
        color: #fff;

        &.sales-icon {
          background: linear-gradient(45deg, #409eff, #1890ff);
        }

        &.order-icon {
          background: linear-gradient(45deg, #67c23a, #95de64);
        }

        &.member-icon {
          background: linear-gradient(45deg, #e6a23c, #f7ba2a);
        }

        &.price-icon {
          background: linear-gradient(45deg, #f56c6c, #ff7875);
        }
      }

      .card-content {
        .card-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .card-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  .charts-container {
    width: 100%;
    flex: 1;
    flex-basis: 0;
    overflow: hidden;
    .charts-container-left {
      width: 64%;
      height: 100%;
      .chart-card {
        width: 100%;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 49%;
        box-sizing: border-box;

        .chart-header {
          width: 100%;
          h3 {
            margin: 0;
            color: #303133;
          }
        }

        .chart-body {
          flex: 1;
          flex-basis: 0;
          overflow: hidden;
          width: 100%;

          .top-products {
            height: 100%;
            // display: flex;
            // flex-direction: column;
            // flex-basis: 0;


            .top-products-list {
              flex: 1;
              padding-top: 4px;
              box-sizing: border-box;
              // display: flex;
              // flex-direction: column;
              // justify-content: center;

              .product-item {
                display: flex;
                align-items: center;
                padding: 10px 0;
                border-bottom: 1px solid #f0f0f0;

                &:last-child {
                  border-bottom: none;
                }

                &.first-rank {
                  .product-name {
                    font-weight: bold;
                    color: #f56c6c;
                  }
                }

                .product-rank {
                  width: 30px;
                  margin-right: 10px;

                  .rank-badge {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 50%;
                    background-color: #ebeef5;
                    color: #909399;
                    font-size: 12px;

                    &.top {
                      background-color: #f56c6c;
                      color: #fff;
                    }
                  }
                }

                .product-name {
                  flex: 1;
                  font-size: 14px;
                  color: #606266;
                }
                .product-money {
                  padding: 0 6px;
                  font-size: 14px;
                  color: #1890ff;
                }

                .product-sales {
                  font-size: 14px;
                  color: #909399;
                }
              }
            }
          }
        }
      }
    }

    .inventory-warning {
      width: 35%;
      height: 100%;

      .card-header {
        font-weight: bold;
        font-size: 16px;
        color: #303133;
      }

      .el-card {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 100%;
      }
    }
  }
}
</style>
